<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>readonly | VitePress</title>
    <meta name="description" content="A VitePress site">
    <link rel="preload stylesheet" href="/assets/style.1fe3aef4.css" as="style">
    
    <script type="module" src="/assets/app.050c7e60.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.52b122f8.js">
    <link rel="modulepreload" href="/assets/chunks/theme.f97d03d7.js">
    <link rel="modulepreload" href="/assets/chunks/index.29ce75ac.js">
    <link rel="modulepreload" href="/assets/chunks/index.6bc94b44.js">
    <link rel="modulepreload" href="/assets/chunks/commonjsHelpers.725317a4.js">
    <link rel="modulepreload" href="/assets/chunks/el-form-renderer.d17e9645.js">
    <link rel="modulepreload" href="/assets/assembly_form_readonly.md.e6d69789.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-80f406db><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7385a610></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7385a610> Skip to content </a><!--]--><!----><header class="VPNav" data-v-80f406db data-v-5953b7f9><div class="VPNavBar has-sidebar" data-v-5953b7f9 data-v-26086e15><div class="container" data-v-26086e15><div class="title" data-v-26086e15><div class="VPNavBarTitle has-sidebar" data-v-26086e15 data-v-561c825c><a class="title" href="/" data-v-561c825c><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-a853fe5c><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-26086e15><div class="curtain" data-v-26086e15></div><div class="content-body" data-v-26086e15><!--[--><!--]--><div class="VPNavBarSearch search" data-v-26086e15><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-26086e15 data-v-81c94828><span id="main-nav-aria-label" class="visually-hidden" data-v-81c94828>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/form.html" tabindex="0" data-v-81c94828 data-v-391de4ef><!--[--><span data-v-391de4ef>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/assembly/form/basic.html" tabindex="0" data-v-81c94828 data-v-391de4ef><!--[--><span data-v-391de4ef>组件</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-26086e15 data-v-30046737><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-30046737 data-v-39d37fec data-v-94d9d5ee><span class="check" data-v-94d9d5ee><span class="icon" data-v-94d9d5ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-39d37fec><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-39d37fec><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-26086e15 data-v-6dcf6834 data-v-19d2c3a0><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/childe-jia" aria-label="github" target="_blank" rel="noopener" data-v-19d2c3a0 data-v-98b97b21><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-26086e15 data-v-12a305f3 data-v-c42375a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-c42375a2><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-c42375a2><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-c42375a2><div class="VPMenu" data-v-c42375a2 data-v-b198516b><!----><!--[--><!--[--><!----><div class="group" data-v-12a305f3><div class="item appearance" data-v-12a305f3><p class="label" data-v-12a305f3>Appearance</p><div class="appearance-action" data-v-12a305f3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-12a305f3 data-v-39d37fec data-v-94d9d5ee><span class="check" data-v-94d9d5ee><span class="icon" data-v-94d9d5ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-39d37fec><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-39d37fec><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-12a305f3><div class="item social-links" data-v-12a305f3><div class="VPSocialLinks social-links-list" data-v-12a305f3 data-v-19d2c3a0><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/childe-jia" aria-label="github" target="_blank" rel="noopener" data-v-19d2c3a0 data-v-98b97b21><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-26086e15 data-v-e6abcc4f><span class="container" data-v-e6abcc4f><span class="top" data-v-e6abcc4f></span><span class="middle" data-v-e6abcc4f></span><span class="bottom" data-v-e6abcc4f></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-80f406db data-v-e0dceac6><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-e0dceac6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-e0dceac6><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-e0dceac6>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-e0dceac6 data-v-44f34666><button data-v-44f34666>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-80f406db data-v-896a7e03><div class="curtain" data-v-896a7e03></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-896a7e03><span class="visually-hidden" id="sidebar-aria-label" data-v-896a7e03> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0 has-active" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>表单Form</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/basic.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>base</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/checkbox-group.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>checkbox-group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/content.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>content</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/date-picker.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>date-picker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/deprecated.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>deprecated</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/disabled.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>disabled</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/el.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>el</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/get-component-by-id.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>get-component-by-id</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/get-form-value.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>get-form-value</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/hidden.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>hidden</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/next-tick.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>next-tick</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/on.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>on</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/radio-group.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>radio-group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/readonly.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>readonly</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/remote.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>remote</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/rules-plus.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>rules-plus</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/rules.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>rules</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/set-options.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>set-options</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/slot-label.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>slot-label</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/slot.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>slot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/update-form.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>update-form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/v-model.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>v-model</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/value-format.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>value-format</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>表格table</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/table/table.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>表格</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>进阶</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/customForm.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/customFormRoules.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件设置自定义校验规则</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/upload.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件--图片上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/uploadFile.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件--文件上传</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-80f406db data-v-0c7fe881><div class="VPDoc has-sidebar has-aside" data-v-0c7fe881 data-v-1a937d4e><!--[--><!--]--><div class="container" data-v-1a937d4e><div class="aside" data-v-1a937d4e><div class="aside-curtain" data-v-1a937d4e></div><div class="aside-container" data-v-1a937d4e><div class="aside-content" data-v-1a937d4e><div class="VPDocAside" data-v-1a937d4e data-v-cf7716b2><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-cf7716b2 data-v-88ca8947><div class="content" data-v-88ca8947><div class="outline-marker" data-v-88ca8947></div><div class="outline-title" role="heading" aria-level="2" data-v-88ca8947>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-88ca8947><span class="visually-hidden" id="doc-outline-aria-label" data-v-88ca8947> Table of Contents for current page </span><ul class="root" data-v-88ca8947 data-v-59923752><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cf7716b2></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1a937d4e><div class="content-container" data-v-1a937d4e><!--[--><!--]--><!----><main class="main" data-v-1a937d4e><div style="position:relative;" class="vp-doc _assembly_form_readonly" data-v-1a937d4e><div><h1 id="readonly" tabindex="-1">readonly <a class="header-anchor" href="#readonly" aria-label="Permalink to &quot;readonly&quot;">​</a></h1><br><!--[--><div class="box" data-v-a580f54d>readonly</div><div data-v-a580f54d>设置 readonly 属性后，el-input 直接展示纯文本的值（value）；el-select 显示对应的 label；其他组件等同于 disabled = true</div><form class="el-form el-form--default el-form--label-right el-form-renderer" data-v-a580f54d><!--[--><!--[--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-73" data-name="form1"><!--[--><!--[--><div id="el-id-8139-73" class="el-form-item__label" style="width:100px;"><!--[-->name<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div class="el-input el-input--default" style=""><!-- input --><!--[--><!-- prepend slot --><!--v-if--><div class="el-input__wrapper"><!-- prefix slot --><!--v-if--><input class="el-input__inner" type="text" readonly autocomplete="off" tabindex="0" placeholder="test placeholder" style=""><!-- suffix slot --><!--v-if--></div><!-- append slot --><!--v-if--><!--]--></div><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-74"><!--[--><!--[--><div id="el-id-8139-74" class="el-form-item__label" style="width:100px;"><!--[-->area<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div>上海</div><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-75"><!--[--><!--[--><div id="el-id-8139-75" class="el-form-item__label" style="width:100px;"><!--[-->multi area<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div>上海,北京</div><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-76"><!--[--><!--[--><div id="el-id-8139-76" class="el-form-item__label" style="width:100px;"><!--[-->date<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div aria-haspopup="dialog" aria-expanded="false" class="el-input is-disabled el-input--prefix el-input--suffix el-date-editor el-date-editor--datetime el-tooltip__trigger el-tooltip__trigger" style="" role="combobox"><!-- input --><!--[--><!-- prepend slot --><!--v-if--><div class="el-input__wrapper"><!-- prefix slot --><span class="el-input__prefix"><span class="el-input__prefix-inner"><!--[--><i class="el-icon el-input__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor" d="M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"></path><path fill="currentColor" d="M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32"></path></svg><!--]--></i><!--]--><!--v-if--></span></span><input class="el-input__inner" name aria-controls="el-id-8139-77" type="text" disabled autocomplete="off" tabindex="0" placeholder="select date" style=""><!-- suffix slot --><span class="el-input__suffix"><span class="el-input__suffix-inner"><!--[--><!--[--><!--]--><!--v-if--><!--]--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span></div><!-- append slot --><!--v-if--><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-78"><!--[--><!--[--><div id="el-id-8139-78" class="el-form-item__label" style="width:100px;"><!--[-->delivery<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-switch is-disabled is-checked" style=""><input class="el-switch__input" type="checkbox" role="switch" aria-checked="true" aria-disabled="true" name true-value="true" false-value="false" disabled><!--v-if--><span class="el-switch__core" style="width:;"><!--v-if--><div class="el-switch__action"><!--[--><!--v-if--><!--]--></div></span><!--v-if--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-79"><!--[--><!--[--><div id="el-id-8139-79" class="el-form-item__label" style="width:100px;"><!--[-->type<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-checkbox-group" role="group" aria-labelledby="el-id-8139-79" loading="false"><!--[--><!--[--><!--[--><!----><label class="el-checkbox is-disabled is-checked"><span class="el-checkbox__input is-disabled is-checked"><input class="el-checkbox__original" type="checkbox" indeterminate="false" disabled value="typeA" checked><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeA<!--]--><!--v-if--></span></label><!--]--><!--[--><!----><label class="el-checkbox is-disabled is-checked"><span class="el-checkbox__input is-disabled is-checked"><input class="el-checkbox__original" type="checkbox" indeterminate="false" disabled value="typeB" checked><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeB<!--]--><!--v-if--></span></label><!--]--><!--[--><!----><label class="el-checkbox is-disabled"><span class="el-checkbox__input is-disabled"><input class="el-checkbox__original" type="checkbox" indeterminate="false" disabled value="typeC"><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeC<!--]--><!--v-if--></span></label><!--]--><!--]--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-80"><!--[--><!--[--><div id="el-id-8139-80" class="el-form-item__label" style="width:100px;"><!--[-->resource<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-radio-group" role="radiogroup" aria-labelledby="el-id-8139-80" loading="false"><!--[--><!--[--><!--[--><!----><label class="el-radio is-disabled is-checked"><span class="el-radio__input is-disabled is-checked"><input class="el-radio__original" value="resourceA" name="el-id-8139-81" disabled type="radio" checked><span class="el-radio__inner"></span></span><span class="el-radio__label"><!--[-->resourceA<!--]--></span></label><!--]--><!--[--><!----><label class="el-radio is-disabled"><span class="el-radio__input is-disabled"><input class="el-radio__original" value="resourceB" name="el-id-8139-81" disabled type="radio"><span class="el-radio__inner"></span></span><span class="el-radio__label"><!--[-->resourceB<!--]--></span></label><!--]--><!--]--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-82"><!--[--><!--[--><div id="el-id-8139-82" class="el-form-item__label" style="width:100px;"><!--[-->desc<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div class="el-textarea" style=""><!-- input --><!--[--><!-- textarea --><textarea class="el-textarea__inner" tabindex="0" readonly autocomplete="off" style=""></textarea><!--v-if--><!--]--></div><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--]--><!--[--><div class="el-form-item asterisk-left" data-v-a580f54d><!--[--><!--[--><!--v-if--><!--]--><!--]--><div class="el-form-item__content" style="margin-left:100px;"><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary" style="" data-v-a580f54d><!--v-if--><span class=""><!--[-->submit<!--]--></span></button><button ariadisabled="false" type="button" class="el-button" style="" data-v-a580f54d><!--v-if--><span class=""><!--[-->reset<!--]--></span></button><!--]--><!--[--><!--]--></div></div><!--]--><!--]--></form><!--]--><details class="details custom-block"><summary>查看源代码</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;box&quot;</span><span style="color:#E1E4E8;">&gt;readonly&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;设置 readonly 属性后，el-input 直接展示纯文本的值（value）；el-select 显示对应的 label；其他组件等同于 disabled = true&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">el-form-renderer</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">readonly</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100px&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:content</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;content&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ruleForm&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">el-form-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">            &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;primary&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;submitForm(&#39;ruleForm&#39;)&quot;</span><span style="color:#E1E4E8;">&gt;submit&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">            &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;resetForm(&#39;ruleForm&#39;)&quot;</span><span style="color:#E1E4E8;">&gt;reset&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">el-form-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">el-form-renderer</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { reactive, ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;vue&quot;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> elFormRenderer </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;../components/femessage/el-form-renderer.vue&quot;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">ruleForm</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">content</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reactive</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">    {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#9ECBFF;">&#39;小明&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;input&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;name&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;name&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        attrs: { </span><span style="color:#9ECBFF;">&#39;data-name&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&#39;form1&#39;</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">        el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">            size: </span><span style="color:#9ECBFF;">&#39;default&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            placeholder: </span><span style="color:#9ECBFF;">&#39;test placeholder&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        },</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss name&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;blur&#39;</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">            { min: </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, max: </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;length between 3 to 5&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;blur&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#9ECBFF;">&#39;shanghai&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;select&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;region&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;area&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        options: [{</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;上海&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&#39;shanghai&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;北京&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&#39;beijing&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }],</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss area&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;change&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: [</span><span style="color:#9ECBFF;">&#39;shanghai&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;beijing&#39;</span><span style="color:#E1E4E8;">],</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;select&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;multi-region&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;multi area&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        options: [{</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;上海&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&#39;shanghai&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;北京&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&#39;beijing&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }],</span></span>
<span class="line"><span style="color:#E1E4E8;">        el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">            multiple: </span><span style="color:#79B8FF;">true</span></span>
<span class="line"><span style="color:#E1E4E8;">        },</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss area&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;change&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#9ECBFF;">&#39;[native Date Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)]&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;date-picker&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;date&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;date&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">            type: </span><span style="color:#9ECBFF;">&#39;datetime&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            placeholder: </span><span style="color:#9ECBFF;">&#39;select date&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        },</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { type: </span><span style="color:#9ECBFF;">&#39;date&#39;</span><span style="color:#E1E4E8;">, required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss date&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;change&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;switch&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;delivery&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;delivery&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;checkbox-group&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;type&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;type&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: [</span><span style="color:#9ECBFF;">&#39;typeA&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;typeB&#39;</span><span style="color:#E1E4E8;">],</span></span>
<span class="line"><span style="color:#E1E4E8;">        options: [{</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;typeA&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;typeB&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;typeC&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }],</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { type: </span><span style="color:#9ECBFF;">&#39;array&#39;</span><span style="color:#E1E4E8;">, required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss type&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;change&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#9ECBFF;">&#39;resourceA&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;radio-group&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;resource&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;resource&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        options: [{</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;resourceA&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&#39;resourceB&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        }],</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss resource&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;change&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, {</span></span>
<span class="line"><span style="color:#E1E4E8;">        default: </span><span style="color:#9ECBFF;">&#39;小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        type: </span><span style="color:#9ECBFF;">&#39;input&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        id: </span><span style="color:#9ECBFF;">&#39;desc&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&#39;desc&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">            type: </span><span style="color:#9ECBFF;">&#39;textarea&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">        },</span></span>
<span class="line"><span style="color:#E1E4E8;">        rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">            { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&#39;miss desc&#39;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&#39;blur&#39;</span><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">        ]</span></span>
<span class="line"><span style="color:#E1E4E8;">    }</span></span>
<span class="line"><span style="color:#E1E4E8;">]);</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">submitForm</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">try</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">        ruleForm.value.methods.</span><span style="color:#B392F0;">validate</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">valid</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">            </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (valid) {</span></span>
<span class="line"><span style="color:#E1E4E8;">                console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;OK&quot;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">            } </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">                console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;error submit!!&quot;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">                </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">            }</span></span>
<span class="line"><span style="color:#E1E4E8;">        });</span></span>
<span class="line"><span style="color:#E1E4E8;">    } </span><span style="color:#F97583;">catch</span><span style="color:#E1E4E8;"> (error) {</span></span>
<span class="line"><span style="color:#E1E4E8;">        console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(error);</span></span>
<span class="line"><span style="color:#E1E4E8;">    }</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">resetForm</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">    ruleForm.value.methods.</span><span style="color:#B392F0;">resetFields</span><span style="color:#E1E4E8;">();</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">style</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">scoped</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#B392F0;">.box</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#79B8FF;">margin</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">20</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#79B8FF;">font-size</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">20</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">style</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;box&quot;</span><span style="color:#24292E;">&gt;readonly&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;设置 readonly 属性后，el-input 直接展示纯文本的值（value）；el-select 显示对应的 label；其他组件等同于 disabled = true&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">el-form-renderer</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">readonly</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100px&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:content</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;content&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ruleForm&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">el-form-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">            &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;primary&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;submitForm(&#39;ruleForm&#39;)&quot;</span><span style="color:#24292E;">&gt;submit&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">            &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;resetForm(&#39;ruleForm&#39;)&quot;</span><span style="color:#24292E;">&gt;reset&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">el-form-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">el-form-renderer</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { reactive, ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;vue&quot;</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> elFormRenderer </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;../components/femessage/el-form-renderer.vue&quot;</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">ruleForm</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">content</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reactive</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">    {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#032F62;">&#39;小明&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;input&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;name&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;name&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        attrs: { </span><span style="color:#032F62;">&#39;data-name&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&#39;form1&#39;</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">        el: {</span></span>
<span class="line"><span style="color:#24292E;">            size: </span><span style="color:#032F62;">&#39;default&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            placeholder: </span><span style="color:#032F62;">&#39;test placeholder&#39;</span></span>
<span class="line"><span style="color:#24292E;">        },</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss name&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;blur&#39;</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">            { min: </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, max: </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;length between 3 to 5&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;blur&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#032F62;">&#39;shanghai&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;select&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;region&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;area&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        options: [{</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;上海&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&#39;shanghai&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }, {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;北京&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&#39;beijing&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }],</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss area&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;change&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: [</span><span style="color:#032F62;">&#39;shanghai&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;beijing&#39;</span><span style="color:#24292E;">],</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;select&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;multi-region&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;multi area&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        options: [{</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;上海&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&#39;shanghai&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }, {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;北京&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&#39;beijing&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }],</span></span>
<span class="line"><span style="color:#24292E;">        el: {</span></span>
<span class="line"><span style="color:#24292E;">            multiple: </span><span style="color:#005CC5;">true</span></span>
<span class="line"><span style="color:#24292E;">        },</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss area&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;change&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#032F62;">&#39;[native Date Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)]&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;date-picker&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;date&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;date&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        el: {</span></span>
<span class="line"><span style="color:#24292E;">            type: </span><span style="color:#032F62;">&#39;datetime&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            placeholder: </span><span style="color:#032F62;">&#39;select date&#39;</span></span>
<span class="line"><span style="color:#24292E;">        },</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { type: </span><span style="color:#032F62;">&#39;date&#39;</span><span style="color:#24292E;">, required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss date&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;change&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;switch&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;delivery&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;delivery&#39;</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;checkbox-group&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;type&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;type&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        default: [</span><span style="color:#032F62;">&#39;typeA&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;typeB&#39;</span><span style="color:#24292E;">],</span></span>
<span class="line"><span style="color:#24292E;">        options: [{</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;typeA&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }, {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;typeB&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }, {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;typeC&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }],</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { type: </span><span style="color:#032F62;">&#39;array&#39;</span><span style="color:#24292E;">, required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss type&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;change&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#032F62;">&#39;resourceA&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;radio-group&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;resource&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;resource&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        options: [{</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;resourceA&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }, {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&#39;resourceB&#39;</span></span>
<span class="line"><span style="color:#24292E;">        }],</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss resource&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;change&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }, {</span></span>
<span class="line"><span style="color:#24292E;">        default: </span><span style="color:#032F62;">&#39;小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述小明的一些描述&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        type: </span><span style="color:#032F62;">&#39;input&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        id: </span><span style="color:#032F62;">&#39;desc&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&#39;desc&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        el: {</span></span>
<span class="line"><span style="color:#24292E;">            type: </span><span style="color:#032F62;">&#39;textarea&#39;</span></span>
<span class="line"><span style="color:#24292E;">        },</span></span>
<span class="line"><span style="color:#24292E;">        rules: [</span></span>
<span class="line"><span style="color:#24292E;">            { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&#39;miss desc&#39;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&#39;blur&#39;</span><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">        ]</span></span>
<span class="line"><span style="color:#24292E;">    }</span></span>
<span class="line"><span style="color:#24292E;">]);</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">submitForm</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">try</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">        ruleForm.value.methods.</span><span style="color:#6F42C1;">validate</span><span style="color:#24292E;">((</span><span style="color:#E36209;">valid</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">            </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (valid) {</span></span>
<span class="line"><span style="color:#24292E;">                console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;OK&quot;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">            } </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">                console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;error submit!!&quot;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">                </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">            }</span></span>
<span class="line"><span style="color:#24292E;">        });</span></span>
<span class="line"><span style="color:#24292E;">    } </span><span style="color:#D73A49;">catch</span><span style="color:#24292E;"> (error) {</span></span>
<span class="line"><span style="color:#24292E;">        console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(error);</span></span>
<span class="line"><span style="color:#24292E;">    }</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">resetForm</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">    ruleForm.value.methods.</span><span style="color:#6F42C1;">resetFields</span><span style="color:#24292E;">();</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">style</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">scoped</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#6F42C1;">.box</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#005CC5;">margin</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">20</span><span style="color:#D73A49;">px</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#005CC5;">font-size</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">20</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">style</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-1a937d4e data-v-560b6242><!--[--><!--]--><!----><nav class="prev-next" data-v-560b6242><div class="pager" data-v-560b6242><a class="pager-link prev" href="/assembly/form/radio-group.html" data-v-560b6242><span class="desc" data-v-560b6242>Previous page</span><span class="title" data-v-560b6242>radio-group</span></a></div><div class="pager" data-v-560b6242><a class="pager-link next" href="/assembly/form/remote.html" data-v-560b6242><span class="desc" data-v-560b6242>Next page</span><span class="title" data-v-560b6242>remote</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"assembly_form_date-picker.md\":\"5c6114ad\",\"assembly_form_on.md\":\"2cf14d5a\",\"assembly_advanced_customform.md\":\"79eb31c6\",\"assembly_form_slot.md\":\"2081c847\",\"assembly_form_rules-plus.md\":\"9d3d6311\",\"assembly_form_deprecated.md\":\"66b6dbb8\",\"assembly_form_get-component-by-id.md\":\"8171a973\",\"assembly_form_radio-group.md\":\"52598721\",\"assembly_form_checkbox-group.md\":\"7b880d40\",\"assembly_form_set-options.md\":\"6b9cb6b1\",\"assembly_advanced_customformroules.md\":\"137f423d\",\"index.md\":\"f5c0a7b4\",\"assembly_form_disabled.md\":\"c70d39d1\",\"assembly_form_remote.md\":\"3173ea21\",\"assembly_form_content.md\":\"7e49928d\",\"assembly_form_rules.md\":\"2773a393\",\"assembly_form_el.md\":\"e7c42ee4\",\"assembly_form_slot-label.md\":\"5187c376\",\"guide_table.md\":\"4a405abc\",\"assembly_form_hidden.md\":\"00926d42\",\"assembly_form_get-form-value.md\":\"20d141c0\",\"assembly_form_update-form.md\":\"7ab65351\",\"assembly_form_v-model.md\":\"f8b8f80f\",\"assembly_form_basic.md\":\"04efb572\",\"assembly_form_readonly.md\":\"e6d69789\",\"assembly_form_next-tick.md\":\"4643f5b6\",\"assembly_form_value-format.md\":\"6904d86f\",\"assembly_advanced_upload.md\":\"26cfdf6f\",\"assembly_table_table.md\":\"88379d01\",\"guide_form.md\":\"c20cffa1\",\"assembly_advanced_uploadfile.md\":\"03238925\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"base\":\"/jiayc4215/\",\"siteTitle\":false,\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/form\"},{\"text\":\"组件\",\"link\":\"/assembly/form/basic\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/childe-jia\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"快速开始\",\"items\":[{\"text\":\"表单Form\",\"link\":\"/guide/form\"},{\"text\":\"表格table\",\"link\":\"/guide/table\"}]}],\"/assembly/\":[{\"text\":\"表单Form\",\"items\":[{\"text\":\"base\",\"link\":\"/assembly/form/basic\"},{\"text\":\"checkbox-group\",\"link\":\"/assembly/form/checkbox-group\"},{\"text\":\"content\",\"link\":\"/assembly/form/content\"},{\"text\":\"date-picker\",\"link\":\"/assembly/form/date-picker\"},{\"text\":\"deprecated\",\"link\":\"/assembly/form/deprecated\"},{\"text\":\"disabled\",\"link\":\"/assembly/form/disabled\"},{\"text\":\"el\",\"link\":\"/assembly/form/el\"},{\"text\":\"get-component-by-id\",\"link\":\"/assembly/form/get-component-by-id\"},{\"text\":\"get-form-value\",\"link\":\"/assembly/form/get-form-value\"},{\"text\":\"hidden\",\"link\":\"/assembly/form/hidden\"},{\"text\":\"next-tick\",\"link\":\"/assembly/form/next-tick\"},{\"text\":\"on\",\"link\":\"/assembly/form/on\"},{\"text\":\"radio-group\",\"link\":\"/assembly/form/radio-group\"},{\"text\":\"readonly\",\"link\":\"/assembly/form/readonly\"},{\"text\":\"remote\",\"link\":\"/assembly/form/remote\"},{\"text\":\"rules-plus\",\"link\":\"/assembly/form/rules-plus\"},{\"text\":\"rules\",\"link\":\"/assembly/form/rules\"},{\"text\":\"set-options\",\"link\":\"/assembly/form/set-options\"},{\"text\":\"slot-label\",\"link\":\"/assembly/form/slot-label\"},{\"text\":\"slot\",\"link\":\"/assembly/form/slot\"},{\"text\":\"update-form\",\"link\":\"/assembly/form/update-form\"},{\"text\":\"v-model\",\"link\":\"/assembly/form/v-model\"},{\"text\":\"value-format\",\"link\":\"/assembly/form/value-format\"}]},{\"text\":\"表格table\",\"items\":[{\"text\":\"表格\",\"link\":\"/assembly/table/table\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"form自定义组件\",\"link\":\"/assembly/advanced/customForm\"},{\"text\":\"form自定义组件设置自定义校验规则\",\"link\":\"/assembly/advanced/customFormRoules\"},{\"text\":\"form自定义组件--图片上传\",\"link\":\"/assembly/advanced/upload\"},{\"text\":\"form自定义组件--文件上传\",\"link\":\"/assembly/advanced/uploadFile\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>